<template>
    <div>
      <div>
        <el-form :inline="true" :model="searchForm" size="mini">
          <div class="common-btn">
            <el-button size="mini" type="primary" @click="dialogBlocking = true">添加</el-button>
          </div>
          <div class="search-common">
            <el-row :gutter="10">
              <el-col :sm="8" :xs="24" >
                <el-form-item>
                  <el-input placeholder="请输入内容" v-model="searchForm.usersTypeCount" class="input-with-select">
                    <el-select v-model="searchForm.usersType" style="width: 120px;" slot="prepend" placeholder="请选择">
                      <el-option label="用户手机" value="account"></el-option>
                      <el-option label="用户ID" value="id"></el-option>
                      <el-option label="用户昵称" value="nickname"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="8" :xs="24" >
                <div class="grid-content bg-purple-light">
                  <el-form-item label="封禁来源" label-width="70px">
                    <el-select placeholder="封禁来源" v-model="searchForm.source" style="width:180px">
                      <el-option label="全部"  value=""></el-option>
                      <el-option label="主动解封" value="1"></el-option>
                      <el-option label="评论管理解封" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :sm="8" :xs="24" >
                <el-form-item label="封禁原因" label-width="70px">
                  <el-select placeholder="封禁原因" v-model="searchForm.blockReason" style="width:180px">
                    <el-option label="全部"  value=""></el-option>
                    <el-option label="恶意诋毁平台" value="1"></el-option>
                    <el-option label="广告" value="2"></el-option>
                    <el-option label="政治、宗教等不正当言论" value="3"></el-option>
                    <el-option label="其他" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :sm="24" :xs="24">
                <el-form-item label="封禁时间" label-width="70px">
                  <el-date-picker
                    v-model="searchForm.blockTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :sm="24" :xs="24" >
                <el-form-item>
                  <el-button type="primary" @click="searchTable">查询</el-button>
                  <el-button type="info" @click="resetForm">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div>
        <!--弹窗-->
        <common-dialog title="添加封禁" width="40%" :base-dialog="dialogBlocking">
          <div slot="body">
            <div>
              <el-form :model="blockingForm" :rules="rules" ref="blockingForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="讲师ID" prop="teacherId">
                  <el-input v-model="blockingForm.teacherId"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="name">
                  <el-input v-model="blockingForm.name"></el-input>
                </el-form-item>
                <el-form-item label="封禁时间" prop="disabledTime">
                  <el-radio-group v-model="blockingForm.disabledTime">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="封禁原因" prop="disabledReason">
                  <el-select v-model="blockingForm.disabledReason" style="width: 100%" placeholder="请选择封禁原因">
                    <el-option label="恶意诋毁平台" value="1"></el-option>
                    <el-option label="广告" value="2"></el-option>
                    <el-option label="政治、宗教等不正当言论" value="3"></el-option>
                    <el-option label="其他" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="tc mt20">
              <el-button @click="submitForm('blockingForm')" size="medium">确定</el-button>
              <el-button @click="dialogFormVisible=false" size="medium">取消</el-button>
            </div>
          </div>
        </common-dialog>
        <!--弹窗-->
      </div>

    </div>
</template>

<script>
  import service from '@/service';
  import commonDialog from "@/components/Common/CommonDialog";
    export default {
      data() {
        return {
          dialogBlocking:false, //添加封禁
          searchForm:{
            source:'',
            blockReason:'',
            usersType:'account',
            usersTypeCount:'',
            blockTime:[],
            startDate:'',
            endDate:''
          },
          blockingForm:{
            teacherId:'',
            name:'',
            disabledTime:'',
            disabledReason:''
          },
          rules:{
            teacherId: [
              { required: true, message: '请输入讲师ID', trigger: 'blur' },
              { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ],
            name: [
              { required: true, message: '请输入用户昵称', trigger: 'blur' },
              { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ],
            disabledTime: [
              { required: true, message: '请选择封禁时间', trigger: 'change' }
            ],
            disabledReason: [
              { required: true, message: '请选择封禁原因', trigger: 'change' }
            ],
          }
        };
      },
      mounted() {

      },
      methods: {
        searchTable(){
          //与父组件通信传值
          if(this.searchForm.blockTime === null){
            this.searchForm.startDate = '';
            this.searchForm.endDate = '';
          }else {
            this.searchForm.startDate = this.searchForm.blockTime[0];
            this.searchForm.endDate = this.searchForm.blockTime[1];
          }
          this.$emit('searchParams', this.searchForm);
          //console.log(JSON.stringify(this.searchForm,'--------'));
        },
        resetForm() {
          this.searchForm.source='';
          this.searchForm.blockReason='';
          this.searchForm.usersType='account';
          this.searchForm.usersTypeCount='';
          this.searchForm.blockTime='';
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
      },
      components:{
        commonDialog
      }
    };
</script>
<style scoped></style>
